<script>
import expressForm from '@/components/DmbForm'
import LTable from '@/components/LTable/index.vue'
import { formBase, tableBase, formItemStyle, cellStyle, headerCellStyle, tableFormStyle } from './config'

const defaultForm = {}
export default {
  name: 'warehoused',
  computed: {
    tableFormStyle() {
      return tableFormStyle
    },
    // 表头单元格样式
    headerCellStyle() {
      return headerCellStyle
    },
    // 单元格样式
    cellStyle() {
      return cellStyle
    },
    // 单个表单样式
    formItemStyle() {
      return formItemStyle
    }
  },
  components: { LTable, expressForm },
  data() {
    return {
      requestConfig: {
        url: '/base/manage/unStorage/selectPredictionProductList',
        method: 'post',
        montage: false
      },
      propsSearchForm: { ...defaultForm },
      form_config: formBase,
      fieldSelect: 'courierNumber',
      fieldInput: '',
      selectionArr: []
    }
  },
  methods: {
    // 返回表格基础类型
    tableBase() {
      return tableBase
    },
    // 表单选项配置
    formBase() {
      return formBase
    },
    // input框值 失去焦点
    inpBlur(target) {
      const { value } = target.target
      this.propsSearchForm[this.fieldSelect] = value
    },
    // select的select框内容改变事件
    selectChange(value) {
      const arr = ['courierNumber', 'transitOrderNo', 'orderId']
      arr.forEach(item => {
        if(item !== value && this.propsSearchForm[item] !== undefined) {
          delete this.propsSearchForm[item]
        }
      })
      this.propsSearchForm[value] = this.fieldInput
    },
    // 导出
    downLoad() {
      if (this.selectionArr.length > 0) {
        const data = this.selectionArr.map(item => {
          return item.id
        })

        this.download('/base/manage/unStorage/export', { ids: data }, `warehousing_${new Date().getTime()}.xlsx`)
      } else {
        this.$message.error('请选择条数据导出')
      }
    }
  }
}
</script>

<template>
  <div>
    <div class="my-3">
      <el-input placeholder="请输入内容" v-model="fieldInput" @blur="inpBlur">
        <el-select v-model="fieldSelect" slot="prepend" placeholder="请选择" class="min-w-[120px]" @change="selectChange">
          <el-option label="快递单号" value="courierNumber" />
          <el-option label="转运单号" value="transitOrderNo" />
          <el-option label="单号ID" value="orderId" />
        </el-select>
      </el-input>
    </div>
    <div>
      <express-form
        :model-value="propsSearchForm"
        :form-items="formBase()"
        :item-style="formItemStyle"
        labelWidth="75px"
        @update="(row) => propsSearchForm = row"
      >
        <template v-slot:footer="row" class="flex flex-row-reverse">
          <div class="mb-3 flex flex-row-reverse">
            <div>
              <el-button type="success" @click="$refs.table.getListData()">查询</el-button>
              <el-button type="primary" @click="downLoad">导出</el-button>
            </div>
          </div>
        </template>
      </express-form>
    </div>
    <l-table
      ref="table"
      :prop-list="tableBase()"
      :is-operate="false"
      select-column-type="RADIO"
      :props-search-form="propsSearchForm"
      :req-request="requestConfig"
      select-key="id"
      findType="findPage"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :initialize="false"
      :change-search-form="false"
      :show-footer="true"
      :form-item-style="tableFormStyle"
      @selectionChange="(row) => { selectionArr = row }"
    >
      <template v-slot:title="{ row }">
        <div class="h-[50px] flex gap-5 items-center text-center">
          <div>
            <div>票数</div>
            <div class="text-[#FF00FD]">{{ row.orderCount || 0 }}</div>
          </div>
          <div>
            <div>会员数量</div>
            <div class="text-[#4B0082]">{{ row.userCount || 0 }}</div>
          </div>
        </div>
      </template>
    </l-table>
  </div>
</template>

<style scoped lang="scss">
.el-select .el-input {
  width: 130px;
}
</style>
